<template>
  <div class="app-container">
        <div class="customer-info">
          <div class="customer-info-title">
              客户({{customer.customerName}})
          </div>
          
          <table class="my-table">
            <tr>
              <td class="text-r">客户编号</td>
              <td>{{customer.customerCode}}</td>
              <td class="text-r">客户名称</td>
              <td>{{customer.customerName}}</td>
            </tr>
            <tr>
              <td class="text-r">行业类型</td>
              <td>{{customer.industryType}}</td>
              <td class="text-r">总部客户</td>
              <td>{{customer.isGeneral}}</td>
            </tr>
            <tr>
            <td class="text-r">单位人数</td>
            <td>{{customer.persons}}人</td>
            <!-- <td class="text-r">手机号</td>
            <td>{{customer.mobile}}</td> -->
            <td class="text-r">电话</td>
            <td>{{customer.telephone}}</td>
            </tr>
            <tr>
            <td class="text-r">网址</td>
            <td>{{customer.website}}</td>
            <td class="text-r">邮箱</td>
            <td>{{customer.email}}</td>
            </tr>
            <tr>
            <td class="text-r">创建人</td>
            <td ><span v-if="user">{{user.nickName}}</span></td>
            <td class="text-r">创建时间</td>
            <td ><span v-if="user">{{customer.createTime}}</span></td>
            </tr>
            <tr>
            <td class="text-r">最后跟进时间</td>
            <td ><span v-if="user">{{customer.receiveTime}}</span></td>
            <td class="text-r">入公海时间</td>
            <td ><span v-if="user">{{customer.poolTime}}</span></td>
            </tr>
            <tr>
            <td class="text-r">所属区域</td>
            <td>{{dept.deptName}}</td>
            <td class="text-r">客户类型</td>
            <td><el-tag prop="customerType" v-for="(item, index) in customerTypeOptions"    v-if="customer.customerType==item.dictValue">{{item.dictLabel}}</el-tag></td>
            <tr>
            <td class="text-r">客户状态</td>
            <td><el-tag prop="status" v-for="(item, index) in statusOptions"  :type="customer.status==1?'success':'danger'"  v-if="customer.status==item.dictValue">{{item.dictLabel}}</el-tag></td>
            <td class="text-r">是否认领</td>
            <td><el-tag prop="isReceive" v-for="(item, index) in receiveOptions"  :type="customer.isReceive==1?'success':'danger'"  v-if="customer.isReceive==item.dictValue">{{item.dictLabel}}</el-tag></td>
            </tr>
            <tr>
            <td class="text-r">详细地址</td>
            <td colspan="3">{{customer.detailAddress}}</td>
            
            </tr>
          </table>
        <el-tabs v-model="activeName" type="border-card"  >
          <el-tab-pane label="联系人" name="links" >
              <el-row :gutter="10" class="mb8">
            <el-col :span="1.5">
              <el-button
                type="primary"
                icon="el-icon-plus"
                size="mini"
                @click="handleAdd"
                v-hasPermi="['crm:customerContacts:add']"
              >新增</el-button>
            </el-col>
            <el-col :span="1.5">
              <el-button
                type="success"
                icon="el-icon-edit"
                size="mini"
                :disabled="single"
               @click="handleUpdate"
                v-hasPermi="['crm:customerContacts:edit']"
              >修改</el-button>
            </el-col>
            <el-col :span="1.5">
              <el-button
                type="danger"
                icon="el-icon-delete"
                size="mini"
                :disabled="multiple"
                 @click="handleDelete"
                v-hasPermi="['crm:customerContacts:remove']"
              >删除</el-button>
            </el-col>
            
          </el-row>
             <el-table
              :data="contactsList"
              border
              @selection-change="handleSelectionChange"
              style="width: 100%">
              <el-table-column type="selection" width="55" align="center" />
              <el-table-column
                prop="name"
                label="姓名"
                width="180">
              </el-table-column>
              <el-table-column
                prop="mobile"
                label="手机号"
                width="180">
              </el-table-column>
              <el-table-column
                prop="dept"
                label="部门">
              </el-table-column>
              <el-table-column
                prop="post"
                label="职务">
              </el-table-column>
               <el-table-column
                prop="lastTime"
                label="下次联系时间">
                <template slot-scope="scope">
                  <span>{{ parseTime(scope.row.lastTime, '{y}-{m}-{d}') }}</span>
                </template>
              </el-table-column>
            </el-table>
          </el-tab-pane>
          <el-tab-pane label="认领" name="user">
             <el-table
              :data="customerUserList"
              border
              style="width: 100%">
              <el-table-column
                prop="userNickName"
                label="负责人"
                width="180">
              </el-table-column>
              <el-table-column
                prop="createTime"
                label="提交时间"
                width="180">
                <template slot-scope="scope">
                  <span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
                </template>
              </el-table-column>
               <el-table-column
                prop="createTime"
                label="认领时间"
                width="180">
                <template slot-scope="scope">
                  <span>{{ parseTime(scope.row.startTime, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
                </template>
              </el-table-column>
              <el-table-column
                prop="status"
                label="状态">
                 <template slot-scope="scope">
                  <el-tag prop="status" v-for="(item, index) in customerUserStatusOptions"    v-if="scope.row.status==item.dictValue">{{item.dictLabel}}</el-tag>
              </template>
              </el-table-column>
               <el-table-column
                prop="status"
                label="审核状态">
                 <template slot-scope="scope">
                  <el-tag prop="isAudit" v-for="(item, index) in auditOptions"  :type="scope.row.isAudit==1?'success':'danger'"  v-if="scope.row.isAudit==item.dictValue">{{item.dictLabel}}</el-tag>
              </template>
              </el-table-column>
              <el-table-column label="审核记录" align="center" prop="auditNote" />
            </el-table>
          </el-tab-pane>
          <el-tab-pane :label="visitTitle" name="visit">
              <el-timeline>
                 <el-timeline-item v-for="(item,i) in visitList" :timestamp="item.createTime" placement="top">
                  <el-card>
                    <p>{{item.nickName}} </p>
                    <p> 
                      {{item.createTime}}
                      <el-tag
                        v-for="type in visitTypeOptions"
                        :key="type.dictValue"
                        v-if="item.visitType==type.dictValue"
                        >
                        {{type.dictLabel}}
                      </el-tag>
                    </p>
                      <p v-html="item.content"></p>
                      <div>
                        <span v-for="(img,i) in parseArr(item.photos)">
                          <el-image 
                            style="width: 100px; height: 100px;margin-right:10px;"
                            :src="img" 
                            :preview-src-list="parseArr(item.photos)">
                          </el-image>
                        </span>
                      </div>
                       <p > {{item.address}}</p>
                       <p > 下次联系时间:{{item.nextTime}}</p>
                  </el-card>
                </el-timeline-item>
                 
                 
                </el-timeline>
          </el-tab-pane>
           <el-tab-pane label="合同" name="contract">
             <el-table
              :data="contractList"
              border
              style="width: 100%">
                 <el-table-column
                prop="code"
                label="合同编号"
                width="180">
              </el-table-column>
              <el-table-column
                prop="name"
                label="合同名称"
                width="180">
              </el-table-column>
              <el-table-column
                prop="customerName"
                label="客户名称">
              </el-table-column>
              <el-table-column
                prop="money"
                label="合同金额">
              </el-table-column>
                <el-table-column
                prop="receivedMoney"
                label="回款金额">
              </el-table-column>
                <el-table-column
                prop="unreceivedMoney"
                label="未回款金额">
              </el-table-column>
               <el-table-column
                prop="nickName"
                label="负责人">
              </el-table-column>
                <el-table-column
                prop="startTime"
                label="下单时间">
                <template slot-scope="scope">
                  <span>{{ parseTime(scope.row.orderDate, '{y}-{m}-{d}') }}</span>
                </template>
              </el-table-column>
              <el-table-column
                prop="startTime"
                label="开始时间">
                <template slot-scope="scope">
                  <span>{{ parseTime(scope.row.startTime, '{y}-{m}-{d}') }}</span>
                </template>
              </el-table-column>
              <el-table-column
                prop="limitTime"
                label="结束时间">
                 <template slot-scope="scope">
                  <span>{{ parseTime(scope.row.limitTime, '{y}-{m}-{d}') }}</span>
                </template>
              </el-table-column>
               <el-table-column
                prop="status"
                label="状态">
                <template slot-scope="scope">
                    <el-tag prop="checkStatus" v-for="(item, index) in contractStatusOptions"  :type="scope.row.checkStatus==1?'success':'danger'"  v-if="scope.row.checkStatus==item.dictValue">{{item.dictLabel}}</el-tag>
                </template>
              </el-table-column>
             </el-table>
           </el-tab-pane>
        </el-tabs>
        <el-dialog :title="title" :visible.sync="open" width="600px" append-to-body>
            <el-form ref="form" :model="form" :rules="rules" label-width="120px">
              <el-form-item label="姓名" prop="name" >
                <el-input v-model="form.name"   show-word-limit placeholder="请输入姓名" />
              </el-form-item>
              <el-form-item label="手机号" prop="mobile" >
                <el-input v-model="form.mobile"   show-word-limit placeholder="请输入手机号" />
              </el-form-item>
              <el-form-item label="电话" prop="telephone" >
                <el-input v-model="form.telephone"   show-word-limit placeholder="请输入电话" />
              </el-form-item>
              <el-form-item label="邮箱" prop="email" >
                <el-input v-model="form.email"   show-word-limit placeholder="请输入邮箱" />
              </el-form-item>
               <el-form-item label="部门" prop="podeptst" >
                <el-input v-model="form.dept"   show-word-limit placeholder="请输入部门" />
              </el-form-item>
              <el-form-item label="职务" prop="post" >
                <el-input v-model="form.post"   show-word-limit placeholder="请输入职务" />
              </el-form-item>
              
              <el-form-item label="下次联系时间" prop="lastTime" >
                 <el-date-picker
                  v-model="form.lastTime"
                  type="datetime"
                  placeholder="选择日期时间">
                </el-date-picker>
              </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button type="primary" @click="submitContactForm">确 定</el-button>
              <el-button @click="contactCancel">取 消</el-button>
            </div>
        </el-dialog>
       </div>
  </div>
</template>

<script>
import { getCustomerInfo } from "@/api/crm/customer";
 import { listCustomerContacts, getCustomerContacts, delCustomerContacts, addCustomerContacts, updateCustomerContacts, exportCustomerContacts } from "@/api/crm/customerContacts";
export default {
  name: "Customer",
  components: {  },
  data() {
    return {
      visitTitle:"",
      customerId:null,
      title:"",
      open:false,
      activeName: 'links',
      contractStatusOptions:[],
      customerTypeOptions:[],
      customerUserStatusOptions:[],
      auditOptions:[],
      statusOptions:[],
      receiveOptions:[],
      contractList:[],
      visitTypeOptions:[],
      // 查询参数
      queryParams: {
        
      },
      customer:{},
      dept:{},
      user:{},
      contactsList:[],
      customerUserList:[],
      visitList:[],
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      form:{},
      // 表单校验
      rules: {
        name: [
          { required: true, message: "姓名不能为空", trigger: "blur" }
        ],
        mobile: [
          { required: true, message: "手机号不能为空", trigger: "blur" }
        ],
        name: [
          { required: true, message: "姓名不能为空", trigger: "blur" }
        ],
        
      }
    };
  },
  created() {
    this.getDicts("customer_status").then((response) => {
      this.statusOptions = response.data;
    });
    this.getDicts("customer_receive").then((response) => {
      this.receiveOptions = response.data;
    });
     this.getDicts("customer_user_status").then((response) => {
      this.customerUserStatusOptions = response.data;
    });
    this.getDicts("customer_user_audit").then((response) => {
      this.auditOptions = response.data;
    });
    this.getDicts("customer_visit_type").then((response) => {
      this.visitTypeOptions = response.data;
    });
    this.getDicts("customer_type").then((response) => {
      this.customerTypeOptions = response.data;
    });
     this.getDicts("contract_status").then((response) => {
        this.contractStatusOptions = response.data;
    });
    this.visitTitle="跟进"
    
  },
  mounted() {
   
  },
  methods: {
    // 取消按钮
    contactCancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    contactReset() {
      this.form = {
        contactsId: null,
        customerId: null,
        name: null,
        mobile: null,
        telephone: null,
        email: null,
        post: null,
        address: null,
        remark: null,
        createUserId: null,
        createTime: null,
        updateTime: null,
        lastTime: null,
        isDel: null
      };
      this.resetForm("form");
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.contactsId)
      this.single = selection.length!==1
      this.multiple = !selection.length                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              
    },
     /** 新增按钮操作 */
    handleAdd() {
      this.contactReset();
      this.open = true;
      this.title = "添加客户联系人";
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.contactReset();
      const contactsId = row.contactsId || this.ids
      getCustomerContacts(contactsId).then(response => {
        this.form = response.data;
        this.open = true;
        this.title = "修改客户联系人";
      });
    },
    /** 提交按钮 */
    submitContactForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          this.form.customerId=this.customerId;
          if (this.form.contactsId != null) {
            updateCustomerContacts(this.form).then(response => {
              if (response.code === 200) {
                this.msgSuccess("修改成功");
                this.open = false;
                this.getCustomerDetails(this.customerId);
              }
            });
          } else {
            addCustomerContacts(this.form).then(response => {
              if (response.code === 200) {
                this.msgSuccess("新增成功");
                this.open = false;
                this.getCustomerDetails(this.customerId);
              }
            });
          }
        }
      });
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const contactsIds = row.contactsId || this.ids;
      this.$confirm('是否确认删除客户联系人编号为"' + contactsIds + '"的数据项?', "警告", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(function() {
          return delCustomerContacts(contactsIds);
        }).then(() => {
          this.getCustomerDetails(this.customerId);
          this.msgSuccess("删除成功");
        }).catch(function() {});
    },
    submitForm(){
      
    },
    cancel(){

    },
    getCustomerDetails(customerId){
      this.customerId=customerId;
      getCustomerInfo(customerId,1).then(response => {
        console.log(response.customer)
        this.customer = response.customer;
        this.dept=response.dept;
        this.user = response.user;
        this.contactsList=response.contactsList;
        this.customerUserList=response.customerUserList;
        this.visitList=response.visitList;
        this.visitTitle="跟进("+this.visitList.length+")";
        this.contractList=response.contractList;
      });
    }
    
  }
};
</script>
<style scoped>
.customer-info-title{
  font-weight: bold;
  display: flex;
  margin: 10px 0px;
}

.customer-info{
  margin:10px;
  overflow:auto;
}
 .my-table{
    margin: 10px 0px;
    width: 100%;
    text-align: left;
    border-collapse: collapse;
    border-spacing: 0;
    border-top: 1px solid #ebeef5;
    border-left: 1px solid #ebeef5;
}

.my-table td{
    width: 25%;
    word-break: break-all;
    word-wrap: break-word;
    border-right: 1px solid #ebeef5;
    border-bottom: 1px solid #ebeef5;
    font: 500 14px Arial;
    padding: 10px 10px;
}
.my-table .text-r{
    color: #909399;
    text-align: right;
}
</style>

